<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-paper" color="red" size="18"></Icon> 物资管理
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	            物资报损
	        </BreadcrumbItem>
	  </Breadcrumb>
	  	<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" style="width:60%;margin-top: 10px;">
        <FormItem label="申报人" prop="user">
            <Input v-model="formValidate.user" placeholder="请输入申报人名称"></Input>
        </FormItem>
        <FormItem label="物资名称" prop="name">
           	<Select v-model="formValidate.name" placeholder="请选择申报的物资">
                <Option :value="file.itemId" v-for="(file,index) in files" :key="index">{{file.itemName}}</Option>
            </Select>
        </FormItem>
        <FormItem label="物资规格" prop="standard">
            <Input v-model="formValidate.standard" placeholder="请输入申报规格"></Input>
        </FormItem>
        <FormItem label="申报类型" prop="type">
            <Select v-model="formValidate.type" placeholder="请选择申报的物资类型">
                <Option value="beijing">文具</Option>
                <Option value="shanghai">办公设备</Option>
                <Option value="shenzhen">日用品</Option>
            </Select>
        </FormItem>
        <FormItem label="申报数量" prop="count">
        	<InputNumber :min="1" v-model="formValidate.count"></InputNumber>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交申请</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置表单</Button>
        </FormItem>
    </Form>
	</div>
</template>

<script>
	export default{
		name:'applyHistory',
		data () {
            return {
            	files:[],
                formValidate: {
                	user:'',
                    name: '',
                    type: '',
                    count:1,
                    standard: ''
                },
                ruleValidate: {
                    user: [
                        { required: true, message: '申报人名称不能为空', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '申报物资名称不能为空', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择申报类型', trigger: 'change' }
                    ],
                    standard: [
                        { required: true, message: '申报规格不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.submitInfo()
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
			submitInfo(){//提交表单
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/addItemDisk',
	    			data:{
	    				diskItemRecordUserName:that.formValidate.user,
	    				diskItemRecordItemName:that.formValidate.name,
	    				diskItemRecordItemSpe:that.formValidate.standard,
	    				diskItemRecordItemType:that.formValidate.type,
	    				diskItemItemCount:that.formValidate.count
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code==200){
                    	this.$Message.success(res.data.msg);
                    	this.handleReset('formValidate')
	    				return
	    			}
                    this.$Message.error(res.data.msg);
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getItem(){//获取所有物资记录
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getItem',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.files = res.data.itemList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
       },
       created(){
       	this.getItem()
       }
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
</style>